// 省市级三级联动选着
var province = $("#province"),
    city = $("#city"),
    town = $("#town");
for (var i = 0; i < provinceList.length; i++) {
    addEle(province, provinceList[i].name);
}

function addEle(ele, value) {
    var optionStr = "";
    optionStr = "<option value=" + value + ">" + value + "</option>";
    ele.append(optionStr);
}

function removeEle(ele) {
    ele.find("option").remove();
    var optionStar = "<option value=" + "请选择" + ">" + "请选择" + "</option>";
    ele.append(optionStar);
}
var provinceText, cityText, cityItem;
province.on("change", function () {
    provinceText = $(this).val();
    $.each(provinceList, function (i, item) {
        if (provinceText == item.name) {
            cityItem = i;
            return cityItem
        }
    });
    removeEle(city);
    removeEle(town);
    $.each(provinceList[cityItem].cityList, function (i, item) {
        addEle(city, item.name)
    })
});
city.on("change", function () {
    cityText = $(this).val();
    removeEle(town);
    $.each(provinceList, function (i, item) {
        if (provinceText == item.name) {
            cityItem = i;
            return cityItem
        }
    });
    $.each(provinceList[cityItem].cityList, function (i, item) {
        if (cityText == item.name) {
            for (var n = 0; n < item.areaList.length; n++) {
                addEle(town, item.areaList[n])
            }
        }
    });
});


// 商品清单js渲染
class Check_list{
    constructor(){
        this.list=JSON.parse(localStorage.getItem('cart'))||[]
         this.render_goods()

    }
    render_goods(){
        this.list.forEach(item=>{
            $('.order_ul')[0].innerHTML+=`
            <li>
            <img src="${item.img_small_logo}" alt="" class="li_img">
            <div class="li_right">
                <div class="li_right_top">
                    <div class="name">${item.title}</div>
                    <div class="cate">分类：${item.category}</div>
                    <div class="num">x${item.cart_number}</div>
                    <div class="price">￥${Math.round(item.price*item.cart_number*100)/100}</div>
                </div>
                <p>
                    <span><span  class="p_img"></span> 7天无理由退货</span><span><span  class="p_img"></span> 15天换货</span> <span><span class="p_img"></span> 官方发货</span>
                </p>
            </div>
        </li>
            `
        })
        this.total()
      
    }
    // 数据变更
    total(){
        let num=0
        let price=0
        this.list.forEach(item=>{
                num+=item.cart_number
                price+=item.price*item.cart_number
        })
        $('.settle_num').html(num)
        $('.settle_price').html(Math.round(price*100)/100)
        $('.pay_total_price').html(Math.round(price*100)/100)


    }
}
new Check_list()


//遮罩层js 新增收获地址
class Show {
    constructor() {
        // 获取元素
        this.b_y = $('.btn_yes')[0]
        this.init()
    }
    init() {
        this.show()
        this.hide()
        this.btn_y()
        this.button()

        // this.render()

    }
    show() {
        $('.new_address').click(function () {
            $('.mask').css('display', 'block')
            $('.add_address').css('display', 'block')
        })
    }
    hide() {
        $('.del').click(function () {
            $('.add_address').css('display', 'none')
            $('.mask').css('display', 'none')
        })
    }

    btn_y() {
        this.b_y.onclick = () => {
            if ($('.box_name').val() == '' || $('.box_phone').val() == '' || $('.outer>select').val() == '' || $('#text').val() == '') {
                return false
            } else {
                let Arr = [{
                    name: $('.box_name').val(),
                    phone: $('.box_phone').val(),
                    province: $('#province').val(),
                    city: $('#city').val(),
                    town: $('#town').val(),
                    text: $('#text').val(),
                }]
                // console.log(Arr)
                this.render_address(Arr)
            }
           setTimeout(function(){
                $('.add_address').css('display', 'none')
                $('.mask').css('display', 'none')
            },1000)

        }

    }
    render_address(data) {
        // console.log(data)
        $('.address_img').css('display','none')

        data.forEach(item => {
            $('.have_address')[0].innerHTML += `
        <li>
            <div class="add_title">
                <span class="title_name">${item.name}</span>
                <span class="title_phone">${item.phone}</span>
            </div>
            <div class="address_details">
                <span>${item.province}</span>
                <span>${item.city}</span>
                <span>${item.town}</span>
                <span>${item.text}</span>
            </div>
        </li>
        `
        })
    }
    button(){
        $('.pay_btn>button').click(function(){
            if($('.have_address').html()==''){
                $('.mask').css('display', 'block')
                $('.note').css('display', 'block')
            }else{
               location.href='./pay.html'
            }

        })
        $('.note_btn').click(function(){
            $('.mask').css('display', 'none')
            $('.note').css('display', 'none')
        })
    }
}
new Show()